<script setup lang="ts">
import { Card, TabPane, Tabs } from 'ant-design-vue';

import BaseSetting from './components/base-setting.vue';
import SecureSetting from './components/secure-setting.vue';

const settingList = [
  {
    component: BaseSetting,
    key: '1',
    name: '基本设置',
  },
  {
    component: SecureSetting,
    key: '2',
    name: '安全设置',
  },
];
</script>

<template>
  <Card
    class="h-full flex-1"
    :bordered="false"
    title="账号设置"
    :body-style="{ height: '279px' }"
  >
    <Tabs type="card">
      <TabPane v-for="item in settingList" :key="item.key" :tab="item.name">
        <component :is="item.component" v-bind="$attrs" />
      </TabPane>
    </Tabs>
  </Card>
</template>
